import React from 'react'
import {Input, Select, Form, Button, Checkbox, Radio, DatePicker} from 'antd'
import Utils from '../../utils/utils'

const {MonthPicker, RangePicker} = DatePicker;
const FormItem = Form.Item
const Option = Select.Option


class FilterForm extends React.Component {
    handleFilterSubmit = () => {
        let fromData = this.props.form.getFieldsValue()
        this.props.filterSubmit(fromData)
    }
    handleFilterReset = () => {
        this.props.form.resetFields()
    }

    initForm = () => {
        const {getFieldDecorator} = this.props.form
        const formList = this.props.formList

        const formItemList = []

        if (formList && formList.length > 0) {
            formList.forEach((item, i) => {
                let label = item.label
                let field = item.field
                let placeholder = item.placeholder
                let initialValue = item.initialValue || ''
                let width = item.width

                if (item.type == 'INPUT') {
                    const INPUT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue
                            })(
                                <Input type='text' placeholder={placeholder}/>
                            )
                        }
                    </FormItem>
                    formItemList.push(INPUT)
                } else if (item.type == 'SELECT') {
                    const SELECT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue
                            })(
                                <Select
                                    placeholder={placeholder}
                                    style={{width: width}}
                                >
                                    {Utils.getOptionList(item.list)}
                                </Select>
                            )
                        }
                    </FormItem>
                    formItemList.push(SELECT)
                } else if (item.type == 'CHECKBOX') {
                    const CHECKBOX = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                valuePropName: 'checked',
                                initialValue: initialValue,  //true | false
                            })(
                                <Checkbox>
                                    {label}
                                </Checkbox>
                            )
                        }
                    </FormItem>
                    formItemList.push(CHECKBOX)
                } else if (item.type == 'DATE') {
                    if (item.field instanceof Array && item.field.length == 1 && typeof item.field[0] == 'string') {
                        const DATE = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(item.field[0], {
                                    // initialValue: initialValue
                                })(
                                    <RangePicker
                                        showTime={item.showTime || false}
                                    />
                                )
                            }
                        </FormItem>
                        formItemList.push(DATE)
                    } else if (typeof item.field == 'string') {
                        const DATE = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(field, {
                                    // initialValue: initialValue
                                })(
                                    <DatePicker
                                        showTime={item.showTime || false}
                                        // format="YYYY-MM-DD HH:mm:ss"
                                    />
                                )
                            }
                        </FormItem>
                        formItemList.push(DATE)
                    }
                } else if (item.type == 'MONTH') {
                    if (item.field instanceof Array && item.field.length == 1 && typeof item.field[0] == 'string') {
                        const START_TIME = <FormItem label={label} key={field + '_start'}>
                            {
                                getFieldDecorator(`${item.field[0]}_start`, {
                                    // initialValue: initialValue
                                })(
                                    <MonthPicker/>
                                )
                            }
                        </FormItem>
                        formItemList.push(START_TIME)
                        const END_TIME = <FormItem label={'~'} colon={false} key={field + '_end'}>
                            {
                                getFieldDecorator(`${item.field[0]}_end`, {
                                    // initialValue: initialValue
                                })(
                                    <MonthPicker/>
                                )
                            }
                        </FormItem>
                        formItemList.push(END_TIME)
                    } else if (typeof item.field == 'string') {
                        const DATE = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(field, {
                                    // initialValue: initialValue
                                })(
                                    <MonthPicker/>
                                )
                            }
                        </FormItem>
                        formItemList.push(DATE)
                    }
                }

            })
        }

        return formItemList
    }

    render() {
        return (
            <Form layout={'inline'}>
                {this.initForm()}

                <FormItem>
                    <Button type={'primary'} style={{margin: '0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                    <Button onClick={this.handleFilterReset}>重置</Button>
                </FormItem>
            </Form>
        )
    }
}

export default Form.create({})(FilterForm)

